<template>
	<uni-popup ref="popup" :safe-area="false" @maskClick="close">
		<view class="bottom-popup">
			<view class="popup-title d-flex d-r psr a-center j-center">
				<view class="title-text"><text class="title-text-text">喝水打卡</text></view>
				<view class="right_box d-flex d-r a-center j-center">
					<image @tap="close" class="title-icon" src="@/static/image/close.png"></image>
				</view>
			</view>
			<view class="popup-describe">
				<view class="popup-describe-text">您今日已有了{{count}}次喝水记录，共{{countMeasure}}ml</view>
				<view class="d-flex d-r a-center j-center">
					<text class="popup-describe-text">是否用该记录打卡？</text>
				</view>
			</view>
			<view class="popup-row">
				<template v-for="item in waterRecord" :key="index">
					<view class="data-row d-flex d-r a-center j-between">
						<text class="data-row-index">第{{item.index}}次</text>
						<text class="data-row-number">{{item.water}}ml</text>
						<view class="d-flex d-r a-center j-between">
							<text class="data-row-date">{{item.createTime}}</text>
						</view>
					</view>
				</template>
			</view>
			<view>
				<tm-button style="margin:20rpx auto 0 auto;" :width="690" :height="80" :shadow="-1" round="5"
				    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="submit"
				    label="确定"></tm-button>
				<tm-button style="margin:20rpx auto 0 auto;" :width="690" :height="80" :shadow="-1" round="5"
					:fontSize="32" fontColor="#999999" color="#CCCCCC" outlined @tap="close"
					label="取消"></tm-button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { getFoodRecord,addGroupWaterRecord } from "@/api/api";
import { userData as userDataStore } from "@/store/userData";
import moment from "moment";
import { numToChinese } from "@/utils/format";

interface Props {
	groupId?:string,
	recordDate?:any
}
const props = withDefaults(defineProps<Props>(), {
	groupId:'',
	recordDate:moment()
})
const userData: any = userDataStore();
const popup = ref();
const open = () => {
	count.value = 0;
	countMeasure.value = 0;
	waterRecord.value = [];
	refreshWaterRecord()
	popup.value.open("bottom");
}
const count = ref(0);//喝水次数
const countMeasure = ref(0);//已喝水总量
const waterRecord:any = ref([]);//喝水记录
const refreshWaterRecord = () => {
	let params = {
		userId:userData.id,
		recordDate:moment(props.recordDate).format("YYYY-MM-DD"),
		type:5,
	}
	countMeasure.value = 0;
	getFoodRecord(params).then((res:any) => {
		if(res.success){
			waterRecord.value = res.data.userHealthRecordDetails;
			if(waterRecord.value.length==0){
				popup.value.open("bottom");
			}
			count.value = res.data.userHealthRecordDetails.length;
			res.data.userHealthRecordDetails.forEach((item:any,index:number) => {
				item.index = numToChinese(index+1);
				item.createTime = moment(item.createTime,"YYYY-MM-DD HH:mm:ss").format("M月D日HH:mm");
				countMeasure.value += item.water;
			});
		}
	});
}
const emit = defineEmits(["openDrinkWater","refreshData"]);
const submit = () => {
	let userHealthRecordDetails:any = [];
	waterRecord.value.forEach((item:any) => {
		let obj = JSON.parse(JSON.stringify(item));
		userHealthRecordDetails.push({
			water:obj.water,
			unit:"ml"
		});
	})
	let params = {
		groupId:props.groupId,
		userId:userData.id,
		waterTotal:countMeasure.value,
		recordDate:moment(props.recordDate).format("YYYY-MM-DD"),
		type:5,
		userHealthRecordDetails:userHealthRecordDetails
	};
	addGroupWaterRecord(params).then((res:any) => {
		if(res.success){
			uni.showToast({
			    title: "喝水打卡成功",  
			    icon: 'success',  
			    duration: 1500,
			});
			popup.value.close();
			emit("refreshData");
		}
	});
}
const close = () => {
	popup.value.close();
	emit("openDrinkWater");
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.bottom-popup{
	position: relative;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding-bottom: 60rpx;
	.popup-title{
		height: 100rpx;
		/*box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0,0,0,0.1);*/
		/*border-bottom: 1rpx solid #E4E4E4;*/
		.left_box{
			position: absolute;
			top:0;
			left: 0;
			width: 100rpx;
			height: 100rpx;
			.back{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.title-text{
			text-align: center;
			.title-text-text{
				font-size: 34rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.right_box{
			position: absolute;
			top:0;
			right: 0;
			width: 100rpx;
			height: 100rpx;
			.title-icon{
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.popup-describe{
		padding: 23rpx 0 0 0;
		.popup-describe-text{
			text-align: center;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.popup-describe-link{
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1DC691;
			text-decoration: underline;
		}
		.popup-describe-prompt{
			text-align: center;
			padding-top: 13rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}
	.popup-row{
		padding:33rpx 30rpx 0 30rpx;
		.data-row{
			height: 80rpx;
			.data-row-index{
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.data-row-number{
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1DC691;
			}
			.data-row-date{
				padding-right: 30rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.data-row-del{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>